import classNames from 'classnames';
import { useState } from 'react';
import { YmCssMotionList } from 'ym-design';
import './list.less';

function CssMotionListPage() {
  // , { key: 2, text: 'item2' }, { key: 3, text: 'item3' }
  const [keys, setKeys] = useState<{ key: number; text: string }[]>([
    { key: 1, text: 'item1' },
    { key: 2, text: 'item2' },
    { key: 3, text: 'item3' },
  ]);

  const onAppearEnd = (element: any, event: any) => {
    console.log('--onAppearEnd--element--event--:', element, event);
  };

  const onEnterEnd = (element: any, event: any) => {
    console.log('--onEnterEnd--element--event--:', element, event);
  };

  return (
    <div className="motionlist-page">
      <YmCssMotionList
        componentProps={{
          tagName: 'ul',
        }}
        rowKey="key"
        dataSource={keys}
        motionName="transitionList"
        // forceRender={true}
        // removeOnLeave={false}
        // onAppearStart={onCollapse}
        // onEnterStart={onCollapse}
        // onEnterActive={onExpend}
        // onLeaveActive={onCollapse}
        onAppearEnd={onAppearEnd}
        onEnterEnd={onEnterEnd}
        onAllRemoved={() => {
          console.log('--onAllRemoved--');
        }}
        onVisibleChanged={(changedVisible: boolean, info: any) => {
          console.log('Visible Changed >>>', changedVisible, info);
        }}
      >
        {({ listItem, className, style }: any, motionRef) => {
          return (
            <li
              key={listItem.key}
              className={classNames('list-demo-block', className)}
              style={{
                ...style,
              }}
              ref={motionRef as any}
            >
              <span>{listItem.text}</span>
              <button
                onClick={() => {
                  setKeys((prev) => {
                    const newList = prev.filter(
                      (prev) => prev.key !== listItem.key,
                    );
                    return [...newList];
                  });
                }}
              >
                删除
              </button>
            </li>
          );
        }}
      </YmCssMotionList>
      <p>
        <button
          onClick={() => {
            setKeys((prev) => {
              prev.push({ key: 6, text: 'item6' });
              return [...prev];
            });
          }}
        >
          尾部添加
        </button>
        <button
          onClick={() => {
            setKeys((prev) => {
              prev.unshift({ key: 7, text: 'item7' });
              return [...prev];
            });
          }}
        >
          头部添加
        </button>
        <button
          onClick={() => {
            setKeys((prev) => {
              prev.splice(1, 0, { key: 8, text: 'item8' });
              return [...prev];
            });
          }}
        >
          添加到第二个
        </button>
      </p>
      <div>
        <p>
          <button
            onClick={() => {
              setKeys([
                { key: 1, text: 'item1' },
                { key: 2, text: 'item2' },
                { key: 3, text: 'item3' },
              ]);
            }}
          >
            重置keys=[1,2,3]
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              setKeys([
                { key: 1, text: 'item1' },
                { key: 4, text: 'item4' },
                { key: 3, text: 'item3' },
              ]);
            }}
          >
            [1,2,3] -- [1,4,3]
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              setKeys([{ key: 4, text: 'item4' }]);
            }}
          >
            {' '}
            [1,2,3] -- [4]
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              setKeys([
                { key: 4, text: 'item4' },
                { key: 5, text: 'item5' },
                { key: 6, text: 'item6' },
              ]);
            }}
          >
            {' '}
            [1,2,3] -- [4,5,6]
          </button>
          <button
            onClick={() => {
              setKeys([
                { key: 2, text: 'item2' },
                { key: 3, text: 'item3' },
                { key: 4, text: 'item4' },
              ]);
            }}
          >
            {' '}
            [1,2,3] -- [2,3,4]
          </button>
        </p>

        <p>
          <button
            onClick={() => {
              setKeys([
                { key: 1, text: 'item1' },
                { key: 3, text: 'item3' },
                { key: 2, text: 'item2' },
              ]);
            }}
          >
            {' '}
            [1,2,3] -- [1,3,2]顺序改变不会有动画
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              setKeys([]);
            }}
          >
            清空keys
          </button>
        </p>
      </div>
    </div>
  );
}

export default CssMotionListPage;
